<template>
	<div>
		<van-field v-model="remark" rows="22" autosize type="textarea" placeholder="写下你的想法" />
		<div style="right: 2%;position: absolute;margin-top: 1rem;">
			<van-icon name="delete-o" size="25" color="#B9BEC1" @click="ondelete()" />
		</div>
		<div style="margin-top: 1rem;margin-left: 1rem;">
			<van-uploader name="pic" v-model="picList" :max-count="1" :after-read="afterRead" preview-size="100" />
		</div>
		<div style="position: fixed;bottom: 2rem;width: 80%;margin-left: 10%;">
			<van-button round size="large"
				style="background-color: #14C5CD; color: #ffffff;width: 100%;font-weight: bold;font-size: 16px;border: 0;margin-top: 1rem;"
				@click="onRelease()">
				修改
			</van-button>
		</div>
	</div>
</template>

<script>
	import {
		uploadPicAPI,
		updateForumReviewAPI,
		detailUpdateForumReviewAPI
	} from "@/api/forum.js";
	import {
		getUserLocal,
	} from "@/utils/auth.js"
	import {
		getDetailByIdAPI,
	} from "@/api/user.js";
	export default {
		data() {
			return {
				picList: [],
				pic: '',
				remark: "",
				user: {},
				avatar: '',
				nowTime: '',
			};
		},
		created() {
			let id = this.$route.params.id;
			detailUpdateForumReviewAPI(id).then((result) => {
				this.$toast(result.msg);
				this.remark = result.data.detail;
				this.pic=result.data.pic
				this.picList = [];
				if (result.data.pic != '') {
					this.picList.push({
						url: this.APIDomainName + this.pic
					})
				}
			});
		},
		mounted() {
			this.user = getUserLocal();
			getDetailByIdAPI(this.user.id).then(result => {
				this.avatar = result.data.avatar;
			}).catch(() => {});
			this.getNowTime(); //调用函数
		},

		methods: {
			getNowTime() {
				var date = new Date();
				var year = date.getFullYear() // 年
				var month = date.getMonth() + 1; // 月
				var day = date.getDate(); // 日
				// 给一位数的数据前面加 “0”
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				this.nowTime = year + "-" + month + "-" + day;
			},
			afterRead(file, detail) {
				file.status = 'uploading';
				file.message = '上传中...';
				uploadPicAPI(file, detail).then(result => {
					file.status = '';
					file.message = '';
					//重新生成显示的图片url
					this.picList = [];
					this.picList.push({
						url: this.APIDomainName + result.url
					})
					//设置用户表中的字段值
					this.pic = result.url;
				});
			},
			onRelease() {
				let params = {
					id: this.$route.params.id,
					detail: this.remark,
					date: this.nowTime,
					pic: this.pic
				};
				updateForumReviewAPI(params).then((result) => {
					this.$toast(result.msg);
					this.$router.go(-1);
				});
			},
			ondelete() {
				this.remark = '';
			}
		},
	};
</script>

<style>
	.van-field {
		font-size: 20px;
	}
</style>
